<template>
	<div class="header">
		<div class="box80">
			<div class="left"><router-link to='/'><img src="@/assets/images/20190828172059.png" alt=""></router-link></div>	
			<div class="center">
				 <ul>
                    <li>
                        <router-link tag="a" target="_blank" to='/productScreen' >产品筛灯</router-link>
                    </li>
                    <li>
                        <router-link tag="a" target="_blank" to='/selectLampType' :class="{active:selectLamp}">应用面选灯</router-link>
                    </li>
                    <li >
                        <router-link tag="a" target="_blank" to='/project' :class="{active:projectShow}">项目管理</router-link>
                    </li>
					<li>
                        <router-link tag="a" target="_blank" to='/virtual' :class="{active:virtuals}">虚拟试灯</router-link>
                    </li>
					<li>
                        <router-link tag="a" target="_blank" to='/supplierInPage' :class="{active:supplierInPageShow}">加入我们</router-link>
                    </li>
                </ul>
			</div>
			<div class="right" v-show="!isLogin">
				<router-link to='/login' class="header_login"><img src='@/assets/images/back/wnagzhan.png' /><span>登录</span></router-link>
                <!-- <router-link to='/register' class="header_register">注册</router-link> -->
			</div>	
			<div v-show="isLogin" class="isLogin">
				<router-link to='/userCenter' class="user_man">
				<img v-if="userIcon != '' && userIcon != 'undefined'" :src="ImgPath + userIcon" alt="" width="50">
				<img v-else src="@/assets/images/back/ren.png" alt="">
				{{userName}}</router-link> 
				<div class="back">
					<router-link v-show="showManage == 'true'" to='/administer' class="personnel"><img src='@/assets/images/20190806182745.png' />后台管理</router-link>
				</div>
				<button @click="logout()" class="header_login"><img src="@/assets/images/back/guan.png" alt="">退出</button>
			</div>
			
		</div>
	</div>
</template>
<script>
export default {
	data(){
		return{
			isLogin: false,
			userName:'',
			showManage:false,
			selectLamp:false,
			projectShow:false,
			virtuals:false,
			supplierInPageShow:false,
			userIcon:''
		}
	},
	watch:{
		$route(val){
			this.getLogin()
		}
	},
	mounted(){
		if (!!window.ActiveXObject || "ActiveXObject" in window)
		{ console.log(true)
		location.href='/noHtml5'
		 }else{
			console.log(false)
		}
		this.getLogin()
	},
	methods:{
		getLogin(){
			if(localStorage.getItem('token') != null && localStorage.getItem('token') != '' && localStorage.getItem("expiryTime") != null && new Date().getTime() < localStorage.getItem("expiryTime")){
				this.isLogin=true
				this.userName = localStorage.getItem('userName')
				this.showManage = localStorage.getItem("userRole")
				this.userIcon = localStorage.getItem("userIcon")
				let path = this.$router.history.current.path 
				this.selectLamp = path == "/selectLampType" || path == "/selectLampList" || path == "/selectLamp/details"
				this.projectShow = path == "/project" || path == "/parameterLampList" 
				this.supplierInPageShow = path == '/supplierInPage'
				this.virtuals = path == '/virtual'
			}else{
				this.isLogin=false
			}
		},
		logout(){
            localStorage.setItem("token",'')
			localStorage.setItem("expiryTime",new Date().getTime())
			localStorage.setItem('userName','')
			localStorage.setItem('userRole','')
			localStorage.setItem('userIcon','')
			this.isLogin  = false
			this.$router.push({path:'/'})
			this.showManage = 'false'
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.header{
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    background-color: #ffffff;
    border-bottom: solid 1px #e3e3e3;
    line-height: 88px;
	height: 88px;
	z-index: 99;
	.header_login{
		border-radius: 3px;
		color: #000;
		font-size: 17px;
		text-align: center;
		margin-left: 18px;
		border: none;
		background: none;
		img{
			display: inline-block;
			margin-right: 6px;
    		position: relative;
   			 top: 5px;
		}
	}
	.left{
		float: left;
		padding-top: 10px;
		img{display: inline-block;width: 220px;}
	}
	.right{
		float:right;
		a{
			display: inline-block;
			&.header_login{
				border-radius: 3px;
				font-size: 17px;
				width: 98px;
				text-align: center;
				color: #000;
				span{
					display: inline-block;
				}
				img{
					display: inline-block;
					margin-right: 6px;
    position: relative;
    top: 5px;
				}
			}
			&.header_register{
				background-color: #5962a3;
				border-radius: 3px;
				color: #ffffff;
				font-size: 16px;
				width: 98px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				margin-left: 18px;
			}
		}
	}
	.center{
		width: calc(100% - 566px);
		width: -webkit-calc(100% - 566px);
		width: -moz-calc(100% - 566px);
		float: left;
		text-align: center;
		li{
			 display: inline-block;
			 a{
				color: #333333;
				font-size: 16px;
				margin: 0 2rem;
				position: relative;
				&.active,&:hover{
					color: #5962a3;
				}
				&.active::before,&:hover::before{
					content: '';
					height: 3px;
					width: 100%;
					border-radius: 1px;
					background: #5962a3;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			 }
		}
	}
	.isLogin{
		float: right;
		.user_man{
			img{
				width: 25px;
				height: 25px;
				border-radius: 50%;
				top: 6px;
			}
		}
		a{
			display: inline-block;
			font-size: 17px;
			img{
				display: inline-block;
				display: inline-block;
				margin-right: 6px;
    			position: relative;
    			top: 8px;
			}
		}
	}
	.back{
		display: inline-block;
    	margin-left: 20px;
		line-height: 90px;
		a{
			font-size: 16px;
			height: 34px;
			line-height: 32px;
			text-align: center;
			color: #000;
			display: inline-block;
			img{
				display: inline-block;
				margin-right: 6px;
    			position: relative;
    			top: 5px;
				height: 24px;
			}
		}
	}
}
@media (max-width: 1560px){
.header .center li a{margin: 0 13px;}
}
@media (max-width: 1460px){
	.header .center li a{margin: 0 10px;}
}
@media (max-width: 1300px){
	.header .center li a{margin: 0 10px;}
}
@media (max-width: 1200px){
	.header .center li a{margin: 0 5px;}
	.ico{display: block}
	.header {
		.left img{
			width: 160px;
		}
		.center{
			width: calc(100% - 475px);
   			 width: -moz-calc(100% - 475px);
		}
		.center_phone{
			position: absolute;
			width: 100%;
			left: 0;
			top: 88px;
			background: rgba(255,255,255,0.9);
			ul{
				padding: 20px 0 30px;
				li{
					display: block;
					line-height: 46px;
					text-align: left;
					border-bottom: 1px dashed rgba(0,0,0,0.4);
					padding: 0 20px;
					a.active::before{
						display: none;
					}
				}
			}
		}
		
	}
}
@media (max-width: 767px){
	.header{
		height: 66px;
		line-height: 66px;
	}
	.header .right{
		a.header_login,a.header_register{
			width: 65px;
			font-size: 12px;
			height: 26px;
			line-height: 26px;
		}
	} 
	.header .center{
		top: 66px;
	}
}
@media (max-width: 340px){
	.header {
		.left {
			padding-top: 7px;
			img{
				width: 100px;
			}
		}
		.right{
			margin-right: 46px;
			a.header_login{
				width: 56px;
			}
			a.header_register{
				width: 56px;
				margin-left: 6px;
				position: relative;
				top: -1px;
			}
		}
		.ico{
			right: 10px;
		}
	}

}

</style>
